<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<html>
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>JQuery Sticky Notes</title>
         <link rel="stylesheet" type="text/css" href="css/jquery.stickynotes.css" />
         
          <link rel="stylesheet" href="css/themes/ui-lightness/jquery-ui.custom.css" type="text/css"/>
        <script src="js/jquery.js" type="text/javascript" language="javascript"></script>
        <script src="js/jquery-ui.custom.min.js" type="text/javascript" language="javascript"></script>
        <script src="js/jquery.stickynotes.js" type="text/javascript" language="javascript"></script>
        <script language="javascript" type="text/javascript" src="js/ajaxQuickInsert.js"></script>
      
		<script  type="text/javascript" language="javascript">
		 $(document).ready(function() {
			 $("#notes").css("display","none");
			 var options = {
// 						notes:[{"id":1,
// 						      "text":"Test Internet Explorer",
// 							  "pos_x": 50,
// 							  "pos_y": 50,	
// 							  "width": 200,
// 							  "height": 200													
// 						    }],
						editCallback: edited,
						createCallback: created,
						deleteCallback: deleted,
						moveCallback: moved,
						resizeCallback: resized
					};
					jQuery("#notes").stickyNotes(options);
				});
		 
		 var edited = function(note) {
		
			ajaxSendNoteItem('edit',note.id,note.text,note.pos_x,note.pos_y, note.width,note.height);
			};
			var created = function(note) {
	
			ajaxSendNoteItem('create',note.id,note.text,note.pos_x,note.pos_y, note.width,note.height);
			};
			var deleted = function(note) {
	
				ajaxSendNoteItem('delete',note.id,note.text,note.pos_x,note.pos_y, note.width,note.height);
			};
			var moved = function(note) {
		
				ajaxSendNoteItem('move',note.id,note.text,note.pos_x,note.pos_y, note.width,note.height);
			};
			
			var resized = function(note) {
	
				ajaxSendNoteItem('resize',note.id,note.text,note.pos_x,note.pos_y, note.width,note.height);
			};
			
			function showHideNotes() {
				if($("#pShowHide").text()=="Show Notes")
				{
				 	$("#notes").css("display","block");
				 	$("#pShowHide").text("Hide Notes");
				}
				else
				{
					$("#notes").css("display","none");
				 	$("#pShowHide").text("Show Notes");
				}
			}
		</script>
</head>
<body>
	<div>
			
			<h2>Usage</h2>
				<p>				
				<ol>
					<li>Create a note by clicking on the add note button.</li>	
					<li>Edit the note.</li>						
					<li>Stop editing the note by clicking on the wooden background.</li>											
					<li>Reedit the note by double clicking on the notes text.</li>											
					<li>Resize the note with the small icon on the right bottom corner of the note.</li>											
					<li>Reposition the note by dragging it on the the wooden background.</li>		
					<li>Delete the note by clicking on the cross in the left top corner of the note.</li>
				</ol>		
			</p>
		</div>
		<p style="border: 1px solid red; width: 80px;height: 20px;" id="pShowHide" onclick="showHideNotes()">Show Notes</p>
		<div id="notes" style="width:1000px;height:600px;">
		</div>

</body>
</html>